<template>
  <div>
    <br>
    <divider><span class="icon ion-ios-videocam-outline"></span> 视频教程</divider>
    <card>
      <header slot="header">
        {{video.comment}}
      </header>
      <div slot="content">
        <video controls="controls"
               style="display: block; width: 100%"
          src="http://7xjaxu.com1.z0.glb.clouddn.com/biguiyuan_0150926/video/%E7%A2%A7%E6%A1%82%E5%9B%AD%E6%9C%80%E7%BB%88%E7%89%88%E6%9C%AC45%E7%A7%92%E7%89%88%E5%8E%9F%E4%BB%B6_0.mp4"></video>
      </div>
      <footer>
      </footer>
    </card>

    <divider>视频导航</divider>

    <flexbox :gutter="5" wrap="wrap" style="padding: 10px 0">
      <flexbox-item style="text-align: center" v-if="">
        <x-button type="primary"
                  plain
                  mini
                  @click.native=""><span class="ion-ios-arrow-back"></span> 上一节章节</x-button>
      </flexbox-item>
      <flexbox-item style="text-align: center">
        <x-button type="primary"
                  plain
                  mini @click.native="">下一章节<span class="ion-ios-arrow-forward"></span> </x-button>
      </flexbox-item>
    </flexbox>

    <div class="question-part"
         v-if="question">
      <divider>题目</divider>
      <card style="padding-bottom: 20px">
        <header slot="header">
          <p class="question-content" style="padding: 15px;">
            {{question.comment}}
          </p>
        </header>
        <div slot="content">
          <radio :options="question.options"
                 v-model="answer"
                 :max="1"
                 label-position="right"
                 :min="0"
          ></radio>

          <div style="padding: 15px;">
            <p class="notice notice-success" v-if="answer && answer == question.answer">
              <span class="icon ion-ios-checkmark-outline"></span> 恭喜你，您的回答正确！
            </p>
            <p class="notice notice-wrong" v-if="answer && answer != question.answer">
              <span class="icon ion-ios-close-outline"></span> 抱歉,您的回答错误
            </p>
          </div>
        </div>
        <footer slot="footer" style="padding-top: 5px">
          <flexbox>
            <flexbox-item style="text-align: center" v-if="qIndex > 0">
              <x-button mini @click.native="qIndexChange(false)">上一题</x-button>
            </flexbox-item>
            <flexbox-item style="text-align: center"
                          v-if="qIndex < chapter.questionEntityList.length - 1">
              <x-button mini @click.native="qIndexChange(true)">下一题</x-button>
            </flexbox-item>
          </flexbox>
        </footer>
      </card>
    </div>
    <!--<x-button type="warn" plain><span class="ion-ios-cart"></span> 购买本章节</x-button>-->
  </div>
</template>

<script>
  import { Masker, Divider, Card, Flexbox, FlexboxItem, Group, Cell, Panel, XButton, Box, Grid, GridItem, Timeline,
            TimelineItem, Badge, CellBox, Checklist, Radio } from 'vux'
  import service from '../models/services'
//  import chapter from '../mock/chapter'

  export default {
    name: 'videoDetail',
    data () {
      return {
        video: {},
        chapter: {},
        qIndex: 0,
        answer: null
      }
    },
    components: {
      Masker,
      Divider,
      Card,
      Flexbox,
      FlexboxItem,
      Group,
      Cell,
      Panel,
      XButton,
      Box,
      Grid,
      GridItem,
      Timeline,
      TimelineItem,
      Badge,
      CellBox,
      Checklist,
      Radio
    },
    methods: {
      getChapter (id) {
        return service.chapter.get(id)
      },
      getVideo () {
        return service.video.get()
      },
      qIndexChange (flag) {
        let i = this.qIndex
        i += (flag ? 1 : -1)
        if (i >= this.chapter.questionEntityList.length || i < 0) {
          return false
        }

        this.qIndex = i
        this.answer = null
      }
    },
    computed: {
      question () {
        if (!this.chapter || !this.chapter.questionEntityList || !this.chapter.questionEntityList.length) {
          return false
        }

        if (this.qIndex >= this.chapter.questionEntityList.length || this.qIndex < 0) {
          this.qIndex = 0
        }
        let q = this.chapter.questionEntityList[this.qIndex]
        try {
          let qs = JSON.parse(q.options)
          q.options = []
          Object.keys(qs).forEach(function (key) {
            q.options.push({
              key,
              value: qs[key]
            })
          })
        } catch (e) {
        }
        return q
      }
    },
    mounted () {
      const self = this
      const cid = parseInt(this.$route.params.cid, 10)
      const sid = parseInt(this.$route.params.sid, 10)
      const vid = parseInt(this.$route.params.vid, 10)
      service.chapter.getPurchaseStatus(cid, sid)
      .then((res) => {
        if (res.data.code === 0 && res.data.result) {
          this.getChapter(sid).then((response) => {
            if (response.data.code === 0) {
              this.chapter = response.data.result
//              this.chapter = chapter
              const video = this.chapter.videoEntityList.find((video) => {
                return video.id === vid
              })
              if (!video || !video.id) {
                this.$router.push({
                  name: 'courseList'
                })
              }
            } else {
              this.$vux.alert.show({
                title: '错误提示',
                content: res.data.message,
                onShow () {
                },
                onHide () {
                  this.$router.push({
                    name: 'courseList'
                  })
                }
              })
            }
          })
        } else {
          this.$vux.confirm.show({
            title: '无法查看教学视频',
            content: '您尚未购买本章节，需要购买该章节课程后才能观看，您现在需要购买该章节吗',
            onShow () {
            },
            onHide () {
            },
            onCancel () {
              self.$router.push({
                name: 'courseDetail',
                params: {
                  id: sid
                }
              })
            },
            onConfirm () {
              service.car.addChapter({
                cid,
                sid
              })
              .then((response) => {
                if (response.data.code === 0) {
                  self.$router.push({
                    name: 'shoppingCar'
                  })
                } else {
                  self.$vux.alert.show({
                    title: '添加到购物车失败',
                    content: res.data.message,
                    onShow () {
                    },
                    onHide () {
                      self.$router.push({
                        name: 'courseList'
                      })
                    }
                  })
                }
              })
            }
          })
        }
      })
    }
  }
</script>


<style lang="scss">
  .question-part {
    .question-content {
      font-size: 16px;
      color: #666;
    }

    .notice {
      padding: 10px;
      color: #657180;
      font-size: 13px;
      border: 1px solid;
      border-radius: 2px;
      margin-top: 10px;

      &.notice-success {
        border: 1px solid #ccf5e0;
        background-color: #e6faf0;
        .icon {
          color: #0c6;
        }
      }

      &.notice-wrong {
        border: 1px solid #ffd6cc;
        background-color: #ffebe6;

        .icon {
          color: #f30;
        }
      }

      .icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
</style>
